<template>
  <div>
    <div class="el-card-body">
      <i class="el-icon-tickets"
         style="margin-top: 5px;">
      </i>
      <span style="margin-top: 5px;">
        一级菜单
      </span>
      <el-tooltip class="item" effect="dark" content="修改菜单，需重新登录" placement="left-start">
        <el-button
          type="primary" size="mini" icon="el-icon-delete" style="margin-left: 86%" @click="addMenu(false)">添加
        </el-button>
      </el-tooltip>
    </div>
    <!--表格视图-->
    <div>
      <div style="float: left;width: 150px">
        <el-tree :data="TreeData" :props="defaultProps" @node-click="handleNodeClick"
                 :default-expanded-keys="[1]"  node-key="id"></el-tree>
      </div>
      <div style="float: right">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 1100px">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="ID"
            width="60">
          </el-table-column>
          <el-table-column
            prop="url"
            label="url"
            width="80">
          </el-table-column>
          <el-table-column
            prop="path"
            label="路径"
            width="100">
          </el-table-column>
          <el-table-column
            prop="component"
            label="组件"
            width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="菜单名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="iconCls"
            label="图标"
            width="60">
            <template slot-scope="scope">
              <i :class="scope.row.iconCls" style="color: #ffd04c"></i>
            </template>
          </el-table-column>
          <el-table-column
            label="子菜单"
            width="100">
            <template slot-scope="scope">
              <el-button @click="showChildView(scope.$index, scope.row)"
                         type="text" style="color: #f34912">
                查看下级
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="requireAuth"
            label="权限"
            width="160">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.requireAuth"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="要求权限"
                disabled>
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="enabled"
            label="是否启用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                disabled>
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="warning" size="mini" icon="el-icon-edit"
                @click="showEditView(scope.$index, scope.row,true)" plain>
              </el-button>
              <el-button
                type="danger" size="mini" icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)" plain>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--弹框-->
    <el-dialog :title="isEdit ? '编辑菜单' : '添加菜单'" :visible.sync="dialogVisible" :center="true" width="600px">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="父id" prop="parentId">
          <el-input v-model="formData.parentId" placeholder="请输入父id" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="url" prop="url">
          <el-input v-model="formData.url" placeholder="请输入url" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input v-model="formData.path" placeholder="请输入路径" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="图标" prop="iconCls">
          <el-input v-model="formData.iconCls" placeholder="请输入图标名称" clearable :style="{width: '100%'}"></el-input>
          <a href="https://element.eleme.cn/#/zh-CN/component/icon" target="view_window" style="color: #cccccc;font-size: 12px">☞ element UI图标名称</a>
        </el-form-item>
        <el-form-item label="权限" prop="requireAuth" required>
          <el-switch v-model="formData.requireAuth" active-text="需要权限" active-color="#39C615"></el-switch>
        </el-form-item>
        <el-form-item label="组件名" prop="component">
          <el-input v-model="formData.component" placeholder="请输入组件名" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled" required>
          <el-switch v-model="formData.enabled" active-text="启用"></el-switch>
        </el-form-item>
        <el-form-item label="菜单名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入菜单名" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'SecurityData',
    data () {
      return {
        TreeData:[],
        tableData: [],
        dialogVisible:false,
        formData: {
          parentId: "1",
          url: "/",
          path: "/home",
          iconCls: "",
          requireAuth: true,
          component: "Home",
          enabled: true,
          name: undefined,
        },
        isEdit:'',
        updateFormData:{},
        defaultProps: {
          id:'id',
          children: 'children',//指定孩子节点的标签
          label: 'name'//指定孩子节点的数据变量名
        },
        rules: {
          parentId: [{
            required: true,
            message: '请输入父id',
            trigger: 'blur'
          }],
          url: [{
            required: true,
            message: '请输入url',
            trigger: 'blur'
          }],
          path: [{
            required: true,
            message: '请输入路径',
            trigger: 'blur'
          }],
          iconCls: [{
            required: true,
            message: '请输入图标',
            trigger: 'blur'
          }],
          component: [{
            required: true,
            message: '请输入组件名',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入菜单名',
            trigger: 'blur'
          }],
        },
      }
    },
    mounted () {
      this.initTable();
      this.initMenuTree();
    },
    methods: {
      // 初始化树形菜单
      initMenuTree(){
        this.getRequest('/system/role/permiss/menu').then(resp => {
          if (resp) {
            this.TreeData = resp
          }
        })
      },
      // 树形控件点击事件
      handleNodeClick(data) {
        console.log(data);
      },
      // 点击查看下级事件（传参）
      showChildView(index,data){
        this.$router.push({
          path: '/securityChild',
          name: '菜单列表',
          params: {
            name: data.id,
          }
        })
        console.log(data.id)
      },
      //删除事件
      handleDelete(index,data){
        this.$confirm('此操作将删除菜单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/security/data/menu/'+data.id).then(resp=>{
            this.initTable();
            this.$notify.success({ title: '成功', message: resp.message });
          })
        }).catch(() => {
          this.$notify.info({ title: '消息', message: '已取消删除' });
        });
      },
      //显示修改弹出框赋值
      showEditView(index,data,edit){
        this.isEdit=edit
        Object.assign(this.formData,data);
        this.dialogVisible=true;
      },
      // 显示添加弹出框赋值
      addMenu(edit){
        this.isEdit=edit
        this.formData.iconCls=''
        this.formData.name=''
        this.dialogVisible=true
      },
      // 添加、修改菜单
      handelConfirm() {
        //修改事件
        if(this.isEdit){
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
          this.putRequest('/security/data/menu',this.formData).then(resp=>{
            if (resp){
              this.dialogVisible=false;
              this.$notify.success({ title: '成功', message: resp.message });
              this.initTable();
            }
          })
          })
        }else{
          // 添加事件
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            this.postRequest('/security/data/menu',this.formData).then(resp => {
              if (resp) {
                this.$notify.success({ title: '成功', message: resp.message });
                this.dialogVisible=false;
                this.initTable()
              }
            })
          })
        }
      },
      //查询一级菜单列表
      initTable () {
        this.getRequest('/security/data/allMenu').then(resp => {
          if (resp) {
            this.tableData = resp;
          }
        })
      },
    }
  }

</script>

<style scoped>
  .el-card-body {
    width: 97%;
    padding: 10px;
    border-style:solid;
    border-width: 1px;
    border-color: #ddded9;
    margin: 20px 0px;
  }

</style>
